<template>
  <div class="aside">
    <ul class="menui_list">
      <template v-for="(item, index) in menuList" :key="index">
        <li class="menu_item" :class="{ active: index === number }" @click="change(index)">
          <a href="javascript:void(0);">
            <el-icon>
              <HomeFilled />
            </el-icon>
            <span>{{ item.name }}</span>
          </a>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
export default {
  name: 'LeftMenu',
  setup() {
    const data = reactive({
      number: 0,
      menuList: [
        {
          name: '首页',
          path: '/home',
        },
        {
          name: '首页',
          path: '/home',
        },
        {
          name: '首页',
          path: '/home',
        },
        {
          name: '首页',
          path: '/home',
        },
        {
          name: '首页',
          path: '/home',
        },
      ]
    })
    const change = (index) => {
      data.number = index;
    }
    onMounted(() => {

    })
    return {
      ...toRefs(data),
      change
    }
  },
}

</script>
<style scoped lang='scss'>
.aside {
  height: 100vh;
  width: 60px;
  background: rgb(27, 153, 97);
  justify-content: space-between;
  flex-direction: column;
  color: #fff;
}

.menui_list {}

.menu_item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  :hover {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f7349;
  }

  a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0;
    color: #fff;

    span {
      height: 20px;
      line-height: 20px;
      margin-top: 6px;
    }
  }

}
.active{
  background: #0f7349;
}
</style>